<template>
  <div>
    <div class="home" v-if="isShow">
      <div class="search-title">
        <el-select v-model="activityId" filterable placeholder="请选择活动" @change="search">
          <el-option v-for="item in activityList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="box-one">
        <div class="box-one-left">
          <div class="bol-top">
            <div class="bolt-left">
              <p class="boltl-title">乡音活动</p>
              <div class="boltl-content">
                <!-- <img :src="imgSrc + verAcsData.image" alt="" srcset="" > -->
                <el-image style="width: 200px; height: 100%" :src="imgSrc + verAcsData.image" :fit="'fit'"></el-image>
                <div>
                  <p><span>类型：</span><span>{{ verAcsData.type }}</span></p>
                  <p><span>名称：</span><span>{{ verAcsData.name }}</span></p>
                  <p><span>时间：</span><span>{{ verAcsData.time }}</span></p>
                  <p><span>地点：</span><span>{{ verAcsData.address }}</span></p>
                </div>
              </div>
            </div>
            <div class="bolt-right">
              <p class="boltl-title">报名人员</p>
              <div class="boltr-user">
                <div class="boltru-box" v-if="appcantList.length != 0">
                  <p v-for="item in appcantList" :key="item.id">
                    <span>{{ item.realName }}</span>
                    <span>{{ item.sex }}</span>
                    <span>{{ item.phoneNumber }}</span>
                    <el-tag :type="item.examine === 0 ? 'danger' : 'success'">{{
                    item.examine === 0 ? '未审核' :
                    '已审核'
                  }}</el-tag>
                  </p>
                </div>
                <div class="boltru-box" v-else style="text-align:center;">
                  暂无报名人员信息
                </div>
              </div>
            </div>
          </div>
          <div class="bol-bottom">
            <p class="boltl-title">
              <el-select v-model="configId" placeholder="请选择配置" @change="configure">
                <el-option v-for="item in hdType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </p>
            <div class="dt-box" v-if="configData.length != 0">
              <div class="dt-box-at" v-for="(item, index) in configData" :key="index">
                <!-- <img :src="imgSrc + item.image" alt=""> -->
                <el-image style="width: 120px;" :src="imgSrc + item.image" :fit="'fit'"></el-image>
                <div>
                  <p>{{ item.title }}</p>
                  <p>{{ item.content }}</p>
                  <p><span>{{ item.address }}</span><span>{{ item.time }}</span></p>
                </div>
              </div>
            </div>
            <div class="dt-box" v-else style="text-align:center;">暂无该配置数据</div>
          </div>
        </div>
        <div class="box-one-right">
          <p class="boltl-title">统计数据</p>
          <div class="data">
            <div class="data-bmqm">
              <div class="datab-left">
                <p class="boltl-title">报名数据</p>
                <div class="databl-box">
                  <p>
                    <span></span>
                    <span>限制人数</span>
                    <span>{{ signData.limitNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>报名人数</span>
                    <span>{{ signData.signUpNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>已审核数</span>
                    <span>{{ signData.examineNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>未审核数</span>
                    <span>{{ signData.fexamineNum || 0 }}</span>
                  </p>
                </div>
              </div>
              <div class="datab-right">
                <p class="boltl-title">券码数据</p>
                <div class="databl-box">
                  <p>
                    <span></span>
                    <span>新建券码</span>
                    <span>{{ copcodeData.codeNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>券码发送</span>
                    <span>{{ copcodeData.sendNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>用户核销</span>
                    <span>{{ copcodeData.writeOffNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>商家核销</span>
                    <span>{{ copcodeData.adminNum || 0 }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="data-hdgl">
              <div class="datab-left">
                <p class="boltl-title">活动数据</p>
                <div class="databl-box">
                  <p>
                    <span></span>
                    <span>浏览数</span>
                    <span>{{ actyData.browseNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>收藏数</span>
                    <span>{{ actyData.collectionNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>评论数</span>
                    <span>{{ actyData.commentNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>点赞数</span>
                    <span>{{ actyData.likeNum || 0 }}</span>
                  </p>
                </div>
              </div>
              <div class="datab-right">
                <p class="boltl-title">管理数据</p>
                <div class="databl-box">
                  <p>
                    <span></span>
                    <span>入驻乡镇</span>
                    <span>{{ mangeData.townShipNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>入驻场所</span>
                    <span>{{ mangeData.venueNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>乡镇景区</span>
                    <span>{{ mangeData.scenicSpotsNum || 0 }}</span>
                  </p>
                  <p>
                    <span></span>
                    <span>用户反馈</span>
                    <span>{{ mangeData.feedBackNum || 0 }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-two">
        <div class="box-two-left">
          <p class="boltl-title">用户动态</p>
          <div class="dt">
            <p v-for="(item, index) in userMicList" :key="index">
              <span>{{ item.title }}</span>
              <span>{{ item.userName }}</span>
              <span>{{ item.address }}</span>
              <span>{{ item.time }}</span>
              <el-tag :type="item.state === 0 ? 'danger' : item.state === 1 ? 'success' : 'danger'">{{
              item.state === 0 ?
              '未审核' : item.state === 1 ? '已审核' : '已拒绝'
            }}</el-tag>
            </p>
          </div>
        </div>
        <div class="box-two-right">
          <p class="boltl-title">操作按钮</p>
          <div class="operation">
            <div class="operation-at" v-for="(item, index) in operationData" :key="index">
              <p>{{ item.title }}</p>
              <p v-for="(val, i) in item.data" :key="i" @click="operTionClick(val)">
                <img :src="val.icon" alt="" srcset="">
                <span>{{ val.name }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="overflow: hidden;position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
      <iframe src="shouye/shouye.html" frameborder="0" style="width: 100%;height: 100%;"></iframe>
    </div>
  </div>
</template>

<script>
  import { baseurl } from "@/utils/request.js"
  import {
    activityList,
    verlarActivities,
    applicant,
    enrollmentData,
    couponcodeData,
    activityData,
    manageData,
    userDynamics,
    configureInfo
  } from "@/api/index.js"
  export default {
    name: "index",
    data() {
      return {
        isShow: false,
        // 版本号
        version: "3.4.0",
        imgSrc: baseurl,
        activityId: null, //活动id
        townshipId: null, //乡镇id
        value: "",
        activityList: [], //活动列表
        verAcsData: {}, //乡音活动
        appcantList: [], //报名人员
        configId: 1, //配置信息Id
        configData: {}, //配置数据
        signData: {}, //报名数据
        copcodeData: {}, //券码数据
        actyData: {}, //活动数据
        mangeData: {}, //管理数据
        userMicList: {}, //用户动态
        hdType: [{
            label: '配置动态',
            value: 1
          },
          {
            label: '配置景区',
            value: 2
          },
          {
            label: '配置场所',
            value: 3
          }
        ],
        //操作按钮模块数据
        operationData: [{
            title: "活动",
            data: [{
                name: "创建活动",
                icon: require("../assets/images/activity-icon.png"),
                url: "activity/activity_information"
              },
              {
                name: "修改活动",
                icon: require("../assets/images/editActivity-icon.png"),
                url: "activity/activity_information"
              },
              {
                name: "活动配置",
                icon: require("../assets/images/activityTion-icon.png"),
                url: "activity/configure"
              },
              {
                name: "审核报名人员",
                icon: require("../assets/images/examine-icon.png"),
                url: "activity/signUp"
              }
            ]
          },
          {
            title: "卡卷",
            data: [{
                name: "新建券码",
                icon: require("../assets/images/addCode.png"),
                url: "couponCode/couponCode"
              },
              {
                name: "发送用户券码",
                icon: require("../assets/images/userCode-icon.png"),
                url: "couponCode/couponCode"
              },
              {
                name: "核销商户券码",
                icon: require("../assets/images/writeOff-icon.png"),
                url: "couponCode/writeOff"
              }
            ]
          },
          {
            title: "系统",
            data: [{
                name: "引导页管理",
                icon: require("../assets/images/index-icon.png"),
                url: "application/bootpage"
              },
              {
                name: "消息推送",
                icon: require("../assets/images/news-icon.png"),
                url: "application/messagePush"
              },
              {
                name: "用户动态",
                icon: require("../assets/images/userActivity-icon.png"),
                url: "town/sort"
              },
              {
                name: "评论管理",
                icon: require("../assets/images/comment-icon.png"),
                url: "application/info"
              }
            ]
          }
        ],
      };
    },
    created() {
      let roles = this.$store.state.user.roles;
      if (roles.indexOf('admin') != -1) {
        this.isShow = true;
        this.getActivityList();
        this.getUserDynamics(); //用户动态
      }

    },
    mounted() {},
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      //顶部下拉框change事件
      search(id) {
        let data = this.activityList.find(item => item.id === id);
        this.activityId = data.id; //活动id
        this.townshipId = data.townShipId; //乡镇id
        this.configId = 1; //配置id
        this.getVerlarActivities(id); //乡音活动数据
        this.getApplicant(id); //报名人员
        this.getConfigureInfo(id, this.configId); //配置数据
        this.getEnrollmentData(id); //报名数据
        this.getCouponcodeData(id); //券码数据
        this.getActivityData(id); //活动数据
        this.getManageData(id); //管理数据
      },
      //获取活动列表数据
      getActivityList() {
        activityList().then(res => {
          this.activityList = res.data;
          this.activityId = res.data[0].id; //第一条数据的活动id
          this.townshipId = res.data[0].townShipId; //第一条数据的乡镇id
          this.getVerlarActivities(res.data[0].id); //乡音活动数据
          this.getApplicant(res.data[0].id); //报名人员
          this.getConfigureInfo(res.data[0].id, this.configId); //配置数据
          this.getEnrollmentData(res.data[0].id); //报名数据
          this.getCouponcodeData(res.data[0].id); //券码数据
          this.getActivityData(res.data[0].id); //活动数据
          this.getManageData(res.data[0].id); //管理数据
        });
      },
      //获取乡音活动数据
      getVerlarActivities(id) {
        verlarActivities(id).then(res => {
          this.verAcsData = res.data;
        });
      },
      //获取报名人员数据
      getApplicant(id) {
        applicant(id).then(res => {
          this.appcantList = res.data;
        });
      },
      //获取配置数据
      getConfigureInfo(id, state) {
        configureInfo({ id: id, state: state }).then(res => {
          this.configData = res.data;
        });
      },
      //获取报名数据
      getEnrollmentData(id) {
        enrollmentData(id).then(res => {
          this.signData = res.data;
        });
      },
      //获取券码数据
      getCouponcodeData(id) {
        couponcodeData(id).then(res => {
          this.copcodeData = res.data;
        });
      },
      //获取活动数据
      getActivityData(id) {
        activityData(id).then(res => {
          this.actyData = res.data;
        });
      },
      //获取管理数据
      getManageData(id) {
        manageData(id).then(res => {
          this.mangeData = res.data;
        });
      },
      //获取用户动态
      getUserDynamics(id) {
        userDynamics(id).then(res => {
          this.userMicList = res.data;
        });
      },
      //配置下拉框change事件
      configure(e) {
        this.getConfigureInfo(this.activityId, e);
      },
      //操作按钮事件
      operTionClick(e) {
        this.$router.push({ path: e.url, query: { id: this.activityId, townShipId: this.townshipId } });
      },
    },
  };
</script>

<style scoped lang="scss">
  * {
    margin: 0;
  }

  .home {
    width: 100%;
    min-width: 1200px;
    height: calc(100vh - 84px);
    background: #f5f8fa;
    overflow: auto;

    .search-title {
      padding: 20px;
      background: white;
    }

    .box-one {
      height: 49%;
      display: flex;
      justify-content: space-between;
      padding: 1% 1%;

      .box-one-left {
        width: 54%;
        height: 100%;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .bol-top {
          width: 100%;
          height: 55%;
          display: flex;
          justify-content: space-between;

          .bolt-left {
            width: 55.8%;
            height: 100%;
            border-radius: 10px;
            background: white;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;

            .boltl-title {
              padding: 10px;
              font-size: 20px;
              font-weight: bold;
            }

            .boltl-content {
              flex: 1;
              display: flex;
              padding: 10px;
              overflow: hidden;

              img {
                width: 200px;
                height: 100%;
                border-radius: 5px;
              }

              div {
                flex: 1;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding: 0 20px;

                p {
                  width: 100%;
                  display: flex;
                  font-size: 14px;

                  span {
                    &:nth-of-type(1) {
                      width: auto;
                      color: #7a7d80;
                    }

                    &:nth-of-type(2) {
                      flex: 1;
                      color: #404447;
                      text-align: right;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    }
                  }
                }
              }
            }
          }

          .bolt-right {
            width: 43%;
            height: 100%;
            border-radius: 10px;
            background: white;
            display: flex;
            flex-direction: column;

            .boltl-title {
              padding: 10px;
              font-size: 20px;
              font-weight: bold;
            }

            .boltr-user {
              flex: 1;
              display: flex;
              flex-direction: column;

              .boltru-box {
                flex: 1;
                overflow-y: auto;

                p {
                  width: 100%;
                  height: 25%;
                  font-size: 14px;
                  display: flex;
                  align-items: center;
                  text-align: center;

                  span {
                    &:nth-of-type(1) {
                      width: 30%;
                    }

                    &:nth-of-type(2) {
                      width: 20%;
                    }

                    &:nth-of-type(3) {
                      width: 30%;
                    }
                  }
                }
              }
            }
          }
        }

        .bol-bottom {
          width: 100%;
          height: 42%;
          background: white;
          border-radius: 10px;
          display: flex;
          flex-direction: column;

          .boltl-title {
            padding: 0 10px;
            font-size: 20px;
            font-weight: bold;

            ::v-deep .el-input__inner {
              width: 150px;
              border: none;
              box-shadow: none;
              font-size: 20px;
              color: black !important;
              font-weight: bold;
            }

            ::v-deep .el-select .el-input .el-select__caret {
              color: black !important;
              font-size: 20px;
              font-weight: bold;
            }
          }

          .dt-box::-webkit-scrollbar {
            width: 5px;
            background: white;
            border-radius: 10px;
          }

          .dt-box::-webkit-scrollbar-thumb {
            background: rgb(184, 183, 183);
            border-radius: 10px;
          }

          .dt-box {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            overflow-y: auto;
            padding: 10px;

            .dt-box-at {
              width: 50%;
              height: 100%;
              min-width: 50%;
              display: flex;
              padding: 10px 10px;
              box-sizing: border-box;

              img {
                width: 120px;
                border-radius: 5px;
              }

              div {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding: 2px 20px;
                overflow: hidden;

                p {
                  width: 100%;
                  font-size: 14px;
                  color: #7a7d80;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;

                  &:nth-of-type(1) {
                    font-size: 16px;
                    color: #404447;
                  }

                  &:nth-of-type(3) {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    span {
                      &:nth-of-type(1) {
                        flex: 1;
                      }

                      &:nth-of-type(2) {
                        width: auto;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .box-one-right {
        width: 45%;
        height: 100%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        background: white;

        .boltl-title {
          padding: 10px;
          font-size: 20px;
          font-weight: bold;
        }

        .data {
          flex: 1;
          padding: 10px;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
          background: white;

          .data-bmqm {
            width: 100%;
            height: 48%;
            display: flex;
            justify-content: space-between;

            .datab-left {
              width: 49%;
              background: #f5f8fa;
              display: flex;
              flex-direction: column;
              border-radius: 10px;

              .boltl-title {
                padding: 10px 20px;
                font-size: 16px;
              }

              .databl-box {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding: 5% 2%;

                p {
                  width: 45%;
                  display: flex;
                  align-items: center;
                  padding: 0 10px;
                  box-sizing: border-box;

                  span {
                    &:nth-of-type(1) {
                      width: 8px;
                      height: 8px;
                      margin: 0 10px;
                      border-radius: 50%;
                      background: #60a5d2;
                    }

                    &:nth-of-type(2) {
                      width: auto;
                      text-align: center;
                      font-size: 14px;
                      color: #7a7d80;
                    }

                    &:nth-of-type(3) {
                      flex: 1;
                      text-align: right;
                      font-size: 18px;
                      font-weight: bold;
                      color: #404447;
                    }
                  }
                }
              }
            }

            .datab-right {
              width: 49%;
              background: #f5f8fa;
              display: flex;
              flex-direction: column;
              border-radius: 10px;

              .boltl-title {
                padding: 10px 20px;
                font-size: 16px;
              }

              .databl-box {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding: 5% 2%;

                p {
                  width: 45%;
                  display: flex;
                  align-items: center;
                  padding: 0 10px;
                  box-sizing: border-box;

                  span {
                    &:nth-of-type(1) {
                      width: 8px;
                      height: 8px;
                      margin: 0 10px;
                      border-radius: 50%;
                      background: #60a5d2;
                    }

                    &:nth-of-type(2) {
                      width: auto;
                      text-align: center;
                      font-size: 14px;
                      color: #7a7d80;
                    }

                    &:nth-of-type(3) {
                      flex: 1;
                      text-align: right;
                      font-size: 20px;
                      font-weight: bold;
                      color: #404447;
                    }
                  }
                }
              }
            }
          }

          .data-hdgl {
            width: 100%;
            height: 48%;
            width: 100%;
            height: 48%;
            display: flex;
            justify-content: space-between;

            .datab-left {
              width: 49%;
              background: #f5f8fa;
              display: flex;
              flex-direction: column;
              border-radius: 10px;

              .boltl-title {
                padding: 10px 20px;
                font-size: 16px;
              }

              .databl-box {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding: 5% 2%;

                p {
                  width: 45%;
                  display: flex;
                  align-items: center;
                  padding: 0 10px;
                  box-sizing: border-box;

                  span {
                    &:nth-of-type(1) {
                      width: 8px;
                      height: 8px;
                      margin: 0 10px;
                      border-radius: 50%;
                      background: #60a5d2;
                    }

                    &:nth-of-type(2) {
                      width: auto;
                      text-align: center;
                      font-size: 14px;
                      color: #7a7d80;
                    }

                    &:nth-of-type(3) {
                      flex: 1;
                      font-size: 20px;
                      text-align: right;
                      font-weight: bold;
                      color: #404447;
                    }
                  }
                }
              }
            }

            .datab-right {
              width: 49%;
              background: #f5f8fa;
              display: flex;
              flex-direction: column;
              border-radius: 10px;

              .boltl-title {
                padding: 10px 20px;
                font-size: 16px;
              }

              .databl-box {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding: 5% 2%;

                p {
                  width: 45%;
                  display: flex;
                  align-items: center;
                  padding: 0 10px;
                  box-sizing: border-box;

                  span {
                    &:nth-of-type(1) {
                      width: 8px;
                      height: 8px;
                      margin: 0 10px;
                      border-radius: 50%;
                      background: #60a5d2;
                    }

                    &:nth-of-type(2) {
                      width: auto;
                      text-align: center;
                      font-size: 14px;
                      color: #7a7d80;
                    }

                    &:nth-of-type(3) {
                      flex: 1;
                      text-align: right;
                      font-size: 20px;
                      font-weight: bold;
                      color: #404447;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .box-two {
      height: 40%;
      display: flex;
      justify-content: space-between;
      padding: 0 1%;

      .box-two-left {
        width: 54%;
        height: 100%;
        background: white;
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        .boltl-title {
          padding: 10px;
          font-size: 20px;
          font-weight: bold;
        }

        .dt {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          align-content: space-around;
          padding: 10px;

          p {
            width: 100%;
            display: flex;
            align-items: center;

            span {
              text-align: center;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 14px;


              &:nth-of-type(1) {
                width: 40%;
                color: #404041;
              }

              &:nth-of-type(2) {
                width: 20%;
                color: #404041;
              }

              &:nth-of-type(3) {
                width: 15%;
                color: #404041;
              }

              &:nth-of-type(4) {
                width: 15%;
                color: #404041;
              }
            }
          }
        }
      }

      .box-two-right {
        width: 45%;
        height: 100%;
        background: white;
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        .boltl-title {
          padding: 10px;
          font-size: 20px;
          font-weight: bold;
        }

        .operation {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          align-content: space-around;
          padding: 10px;

          .operation-at {
            width: 100%;
            display: flex;

            p {
              width: 20%;
              font-size: 14px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              cursor: pointer;

              img {

                height: 20px;
              }

              span {
                width: 100%;
                text-align: center;
                padding: 10px 0;
              }

              &:nth-of-type(1) {
                width: 15%;
                font-size: 18px;
                cursor: auto;
                background: #f5f8fa;
                border-radius: 5px 0 0 5px;
              }
            }
          }
        }
      }
    }
  }
</style>